<template>
  <div class="top">
    <content>
      <!-- <router-view></router-view> -->
      <van-row>
        <van-col span="6">
          <!-- 分类页面 -->
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              v-for="item in cate"
              :key="item.id"
              :title="item.name"
            />
          </van-sidebar>
        </van-col>
        <van-col span="18">
          <!-- 轮播 -->
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
          <!-- 宫格 -->
          <van-grid :column-num="3">
            <van-grid-item v-for="item in data" 
            :key="item.id" :icon="item.icon" :text="item.name" />
          </van-grid>
          <div></div>
        </van-col>
      </van-row>
    </content>
  </div>
</template>
<script>
import content from "../../components/center/center";
// import swipe from "../../components/HOME/swiper";
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
import { Grid, GridItem } from "vant";

Vue.use(Grid);
Vue.use(GridItem);
export default {
  data() {
    return {
      images: [
        "https://cdn.it120.cc/apifactory/2018/11/07/76d9a2c2bd56c4ac0497b5d360c6bc06.png",
        "https://cdn.it120.cc/apifactory/2018/11/06/1a6dc56d16dcec64639d9ea624ebdd46.jpg",
        "https://cdn.it120.cc/apifactory/2018/11/07/ad7e06f98e8910ff789b6e577b36c20b.jpg",
      ],
      activeKey: 0,
      data: [],
      cate: [
        {
          name: "所有分类",
          id: "1",
        },
        {
          name: "居家",
          id: "2",
        },
        {
          name: "配件装饰",
          id: "3",
        },
        {
          name: "服装",
          id: "4",
        },
        {
          name: "电器",
          id: "5",
        },
      ],
    };
  },
  components: {
    content,
    // swipe,
  },
  mounted() {
    this.$API.fen().then((res) => {
      console.log(res);
   
      // if(res.data.data.id == 0){
   this.data = res.data.data;
      // }
    });
  },
  methods: {
    change(id) {
      this.index = id;
    },
  },
};
</script>
<style lang="scss">
.van-swipe {
  width: 100%;
  height: 12rem;
}
.van-swipe-item {
  width: 100%;
  height: 12rem;
  img {
    width: 100%;
    height: 100%;
  }
}
.top {
  margin-top: 10vh;
}
</style>